<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
        <a href="#" class="list">
            <i class="iconfont icon-liebiao2"></i>
        </a>
        <a href="#" class="search">
            <p class="search-txt">
                <i class="iconfont icon-sousuo"></i>
                搜索目的地/折扣/关键字
            </p>
        </a>
    </header>

    <main>
        <!-- 横幅 -->
        <div class="banner">
            <img src="./images/banner.jpg" alt="">
        </div>
        <!-- 导航按钮 -->
        <ul class="nav">
            <li>
                <a href="#">
                    <img src="./images/pic4.png" alt="">
                    <span>自由行</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/pic.png" alt="">
                    <span>特价机票</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/pic6.png" alt="">
                    <span>当地玩乐</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/pic5.png" alt="">
                    <span>签证</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/pic1.png" alt="">
                    <span>租车自驾</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/pic2.png" alt="">
                    <span>酒店</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/pic3.png" alt="">
                    <span>邮轮</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/pic7.png" alt="">
                    <span>全部</span>
                </a>
            </li>
        </ul>
        <!-- 中间 -->
        <div class="mid">
            <ul class="mid-con">
                <li>
                    <a href="#">
                        <img src="./images/list1.png" alt="">
                        <span>门票/票券</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/list2.png" alt="">
                        <span>当地游</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/list3.png" alt="">
                        <span>WiFi/电话卡</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/list4.png" alt="">
                        <span>交通票券</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/list5.png" alt="">
                        <span>当地参团</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/list6.png" alt="">
                        <span>接送机/包车</span>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 旅游详情 -->
        <div class="detail">
            <h2 class="detail-tit">
                精选折扣
            </h2>

            <ul class="detail-box">
                <li>
                    <a href="#">
                        <img src="./images/pic4.jpg" alt="">
                        <p class="intro">
                            [国庆]长沙直飞洛杉矶10天/13天/14天往返含税机
                        </p>
                        <p class="price">
                            <span>3099</span>元起
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/pic1.jpg" alt="">
                        <p class="intro">
                            [09月18日]歌诗达邮轮大号上海往返长崎5天
                        </p>
                        <p class="price">
                            <span>1449</span>元起
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/pic2.jpg" alt="">
                        <p class="intro">
                            北京直飞马尔代夫6-7天往返含税机票(首都航)
                        </p>
                        <p class="price">
                            <span>3999</span>元起
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/pic3.jpg" alt="">
                        <p class="intro">
                            [暑期][国庆]香港/澳门直飞帕劳5-6天自由行(赠接
                        </p>
                        <p class="price">
                            <span>2650</span>元起
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/pic55.png" alt="">
                        <p class="intro">
                            【可订明日】 【澳大利亚&新西兰】 4G极速无限
                        </p>
                        <p class="price">
                            <span>32</span>元起
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/pic66.png" alt="">
                        <p class="intro">
                            泰国清迈Q-home到店支付产品专拍
                        </p>
                        <p class="price">
                            <span>1</span>元起
                        </p>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 内容最后 -->
        <div class="last">
            <p>
                2004-2017 © 穷游网™ qyer.com All rights reserved.
            </p>
            <ul class="last-list">
                <li class="last-list-on">
                    <a href="#">
                        手机版
                    </a>
                </li>
                <li>
                    <a href="#">
                        电脑版
                    </a>
                </li>
                <li>
                    <a href="#">
                        APP
                    </a>
                </li>
            </ul>
        </div>
    </main>

    <footer>
        <ul class="foot-list">
            <li class="foot-list-on">
                <a href="#">
                    <i class="iconfont icon-shouye"></i>
                    首页
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-Shapecopy"></i>
                    目的地
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-profile"></i>
                    我的
                </a>
            </li>
        </ul>
    </footer>
    <script type="text/javascript" src="./js/flexible.js"></script>
</body>
</html>